<!--
 * @Descripttion: 合同分类
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-10-20 17:23:55
 * @LastEditors: GW
 * @LastEditTime: 2021-10-25 13:44:23
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="big-main-wrapper warehouse-type-wrapper" style="margin:2px 8px;">
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="2" v-if="permissions.includes('contractClass:add')">
                            <div class="btns" @click="editDataFun(1)">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col :span="2" v-if="permissions.includes('contractClass:edit')">
                            <div class="btns" @click="editDataFun(2)">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col>
                        <a-col :span="2" v-if="permissions.includes('contractClass:delete')">
                            <div class="btns" @click="remove">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div class="content-tree-wrapper">
                <div class="tree-box not-copy" style="height:99%">
                    <a-tree show-line default-expand-all :treeData="typsTreeData" v-if="typsTreeData.length>0" @select="onSelect" :replaceFields="replaceFields">
                        <a-icon slot="switcherIcon" type="down" />
                    </a-tree>
                </div>
            </div>
        </div>

        <a-modal v-model="visible" :title="modalTitle" @cancel="()=>{visible = false}">
            <a-form-model v-if="visible" :model="requestData" :label-col="8" :wrapper-col="16" :layout="'inline'">
                <a-form-model-item label="类别编码" :rules="[{ required: true,trigger:'input'}]">
                    <a-input placeholder="请输入两位数类别编码" maxLength="2" onkeyup="value=value.toString().match(/^\d+(?:\.\d{0,5})?/)" v-model.trim="requestData.code" />
                </a-form-model-item>
                <a-form-model-item label="类别名称" :rules="[{ required: true,trigger:'input'}]">
                    <a-input placeholder="请输入分组名称" v-model.trim="requestData.name" />
                </a-form-model-item>
                <a-form-model-item label="收付计划方向" :rules="[{ required: true,trigger:'input'}]">
                    <a-radio-group v-model="requestData.planDirection" @change="onChange">
                        <a-radio v-for="item in plainOptions" :key="item" :value="item.code">
                            {{item.name}}
                        </a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item label="合同编码规则" :rules="[{ required: true,trigger:'input'}]">
                    <a-select placeholder="请选择合同编码规则" :default-value="requestData.numberSetId" style="width: 146px" @change="handleChange">
                        <a-select-option v-for="item in codeRule" :key="item" :value="item.id">
                            {{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>

            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="submitRequest">
                    确认
                </a-button>
                <a-button @click="()=>{visible = false}">
                    取消
                </a-button>
            </template>
        </a-modal>
    </div>
</template>
<script>

import { mapState } from "vuex";
import { groupList, groupDelete, groupSave } from "@/api/contract/contractClass";
import { pageList } from "@/api/erp/mumberSet";
import { classPageListToTree, searchInTreeData } from "@/utils/tree";

export default {
    data () {
        return {
            data: [],
            visible: false,
            replaceFields: {
                // tree 别名
                title: "showname",
                key: "code"
            },
            typsTreeData: [], // 树形数据
            pageSize: -1, // 每页多少条数据
            current: 1, // 当前页
            thisData: [], // 当前选中的数据
            visible: false, // 弹出框默认隐藏
            putStorage: [], // 入库
            outbound: [], // 出库
            selectedKeys: [],
            selectedRows: [],
            modalTitle: '',
            requestData: {
                name: null,
                code: null,
                planDirection: 1,
                numberSetId: null,  //编码设置id
                numberSetName: null, //编码设置name
            },
            codeRule: [],//合同编码规则
            plainOptions: [{
                name: '收',
                code: 1,
            }, {
                name: '付',
                code: 2,
            }, {
                name: '其他',
                code: 3,
            }]
        };
    },
    created () {
        // this.getData();
        // this.getCodeRule();
    },
    activated () {
        this.getData();
        this.getCodeRule();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    methods: {
        onSelect (keys, event) {
            console.log(this.typsTreeData);
            this.selectedKeys = keys;
            // 点击树节点触发
            this.selectedRows = event.node.dataRef;
            // if (keys == "") {
            //     return;
            // } else {
            //     console.log(keys, event.node.dataRef);
            //     //修改
            //     this.editDataFun(2)
            // }
        },
        editDataFun (type) {
            this.visible = true;
            //新增 or 修改
            if (type == 1) {
                this.modalTitle = '新增合同类别';
                this.requestData = {
                    name: null,
                    code: null,
                    planDirection: 1,
                    numberSetId: null,  //编码设置id
                    numberSetName: null, //编码设置name
                }
            } else {
                console.log(this.selectedRows)
                this.requestData = this.selectedRows;
                this.modalTitle = '修改合同类别';
            }
        },
        treeFormate () {
            const childrenNav = [];
            classPageListToTree(this.data, childrenNav, 0);

            //添加showTitle处理后的data
            this.typsTreeData = [
                {
                    title: "合同分类",
                    showname: "合同分类",
                    key: "",
                    children: this.getTreeData(childrenNav)
                }
            ];
            // this.typsTreeData[0].children.unshift({
            //     title: '默认分组',
            //     showname: '默认分组',
            //     key: 930413,
            //     children: []
            // })
        },
        //递归添加显示的tree title
        getTreeData (data) {
            for (let i = 0; i < data.length; i++) {
                let element = data[i];
                this.$set(
                    element,
                    "showname",
                    `(${element.code}) ${element.name}`
                );
                if (element.children) {
                    this.getTreeData(element.children);
                }
            }
            return data;
        },
        getData () {
            // 获取合同类别数据
            const { pageSize, current } = this;
            let params = { size: pageSize, current: current };
            groupList(params).then(res => {
                if (res.code == 200) {
                    this.data = res.data.map(r => {
                        return { ...r, key: r.id }
                    })
                    this.treeFormate();
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        remove () {
            if (this.selectedKeys.length != 1) {
                this.$message.warning("请选择一条数据");
                return;
            }
            // if (this.selectedRows.key == '930413') {
            //     this.$message.warning("默认分组不能删除！");
            //     return;
            // }
            let that = this;
            this.$confirm({
                title: `是否确认删除 ${that.selectedRows.name}`,
                content: "",
                onOk () {
                    groupDelete({ id: that.selectedRows.id }).then(res => {
                        if (res.code == 200) {
                            that.selectedKeys = [];
                            that.$message.success("删除成功");
                            that.getData();
                        } else {
                            that.$message.warning(res.message);
                        }
                    })
                },
                onCancel () { }
            });
        },
        submitRequest () {
            if (this.requestData.code == null) {
                this.$message.warning('请输入类别编码');
                return;
            }
            if (this.requestData.code.length != 2) {
                this.$message.warning('请输入两位数编码');
                return;
            }
            if (this.requestData.name == null) {
                this.$message.warning('请输入类别名称');
                return;
            }
            if (this.requestData.numberSetId == null) {
                this.$message.warning('请选择合同编码规则');
                return;
            }
            groupSave(this.requestData).then(res => {
                if (res.code == 200) {
                    this.selectedKeys = [];
                    this.$message.success("保存成功");
                    this.visible = false;
                    this.getData();
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        getCodeRule () {
            //获取合同编码规则
            pageList({ moduleCode: 'CM' }).then(res => {
                if (res.code === 200) {
                    this.codeRule = [];
                    this.codeRule = res.data.records;
                } else {
                    // this.$message.warning(res.message);
                }
            });
        },
        handleChange (key, rows) {
            console.log(key, rows)
            this.requestData.numberSetId = key;
            this.requestData.numberSetName = rows.key.name;
        }
    },
};
</script>
<style lang="less" scoped>
    .content-box {
        height: 100%;
        width: 240px;
        display: flex;
        flex-flow: column;
        .tree-box {
            height: 100%;
            width: 240px;
            margin-right: 10px;
            background: #efefef;
            padding: 10px;
            overflow-y: auto;
        }
        .table-box {
            text-align: right;
            .btn-clss {
                margin: 10px 0;
            }
        }
    }
    .btn-wrapper {
        // min-height: 52px;
        // border-bottom: 1px solid rgba(173, 173, 173, 0.5);
        margin-bottom: 5px;
        .btns {
            font-size: 14px;
            cursor: pointer;
            overflow: hidden;
        }
        .btns-text {
            margin-top: -2px;
            height: 20px;
            overflow: hidden;
        }
        .btns-icon {
            font-size: 22px;
            color: rgb(24, 144, 255);
        }
        .btns:hover {
            .btns-icon {
                color: rgb(45, 85, 216);
            }
            font-size: 14px;
            transition: all 0.2s;
        }
        .btns:active {
            animation: btns-transform 0.1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        }
    }
    @keyframes btns-transform {
        10%,
        90% {
            transform: (translate3d(-1px, 0px, 0));
        }
        20%,
        80% {
            transform: (translate3d(2px, 0px, 5px));
        }
        30%,
        50%,
        70% {
            transform: (translate3d(-4px, 0px, -8px));
        }
        40%,
        60% {
            transform: (translate3d(4px, 0px, 8px));
        }
    }
</style>
<style lang="less">
    @import '~@/style/setting/inventory.less';
    .warehouse-type-wrapper {
        margin: 0px;
    }
</style>
